<template>
  <div class="main-container">
    <div class="tool">
      <el-button icon="el-icon-refresh" @click="checkTemplate">切换</el-button>
      <div class="font-size-box">
        <el-popover placement="bottom" width="200" trigger="hover">
          <el-slider
            v-model="fontSize"
            :min="10"
            :max="20"
            @change="fontSizeChange"
          >
          </el-slider>
          <el-button slot="reference" icon="el-icon-edit">字体</el-button>
        </el-popover>
      </div>
      <el-button icon="el-icon-sunrise"  v-print="printObj">预览</el-button>
      <el-button icon="el-icon-upload" @click="exportPdf">导出</el-button>
    </div>
    <div class="page">
      <template-left-and-right
        v-if="templateName === 'TemplateLeftAndRight'"
      ></template-left-and-right>
      <template-top-and-bottom
        v-if="templateName === 'TemplateTopAndBottom'"
      ></template-top-and-bottom>
    </div>
    <div>
      <Theme></Theme>
    </div>
  </div>
</template>

<script>

import pdf from 'vue-pdf'

import TemplateTopAndBottom from '@/components/templates/TemplateTopAndBottom.vue'
import TemplateLeftAndRight from '@/components/templates/TemplateLeftAndRight.vue'
import Theme from '@/components/base/Theme.vue'
import { mapGetters } from 'vuex'
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  name: 'MainPage',
  data() {
    return {
      fontSize: 16,
      templateName: '',
      printObj: {
        id: 'resume',
        popTitle: 'good print',
        extraCss:
          'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css',
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        beforeOpenCallback(vue) {
          vue.printLoading = true
          console.log('打开之前')
        },
        openCallback(vue) {
          vue.printLoading = false
          console.log('执行了打印')
        },
        closeCallback(vue) {
          console.log('关闭了打印工具')
        },
      },
    }
  },
  computed: {
    ...mapGetters(['myFontSize','myResumeTitle']),
  },
  methods: {
    // 下载pdf
    exportPdf() {
      let title = this.myResumeTitle
      html2canvas(document.querySelector('#resume'), {
        useCORS: true, //是否尝试使用CORS从服务器加载图像
        allowTaint: true,
        dpi: 300, //解决生产图片模糊
        scale: 3, //清晰度--放大倍数
      }).then(function (canvas) {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let pageHeight = (contentWidth / 592.28) * 841.89 // 一页pdf显示html页面生成的canvas高度;
        let leftHeight = contentHeight //未生成pdf的html页面高度
        let position = 0 //pdf页面偏移
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        let imgWidth = 560.28 //宽度
        let imgHeight = (592.28 / contentWidth) * contentHeight
        let pageData = canvas.toDataURL('image/jpeg', 1.0)
        let PDF = new JsPDF('', 'pt', 'a4')

        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 20, 10, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        PDF.save(`${title}.pdf`) //下载标题
      })
    },

    // 切换模板
    checkTemplate() {
      this.$router.push({
        name: 'templates',
      })
    },
    // 修改字体大小
    fontSizeChange() {
      this.$store.commit('setFontSize', this.fontSize)
    },

  },
  components: {
    TemplateTopAndBottom,
    TemplateLeftAndRight,
    Theme,
    pdf
  },
  created() {
    this.templateName = this.$route.params.templateName
    this.fontSize = Number.parseInt(
      this.myFontSize.substring(0, this.myFontSize.length - 2)
    )
  },
}
</script>

<style lang="less" scoped>
.main-container {
  width: auto;
  margin-top: 60px;
  padding-top: 30px;
  background-color: rgb(22, 25, 30);
}
.tool {
  width: 21cm;
  margin: 0 auto;
  margin-bottom: 20px;
  background-color: rgb(40, 47, 57);
  color: #fff;
  display: flex;
  justify-content: space-around;
}

.el-button {
  background-color: transparent;
  color: rgb(163, 169, 186);
  border: 1px solid rgb(64, 77, 96);
}

.page {
  width: 21cm;
  min-height: 29.7cm;
  background-color: #fff;
  margin: 0 auto;
}
</style>
